<template>
  <van-form class="relative" @submit="handleSubmit">
    <van-field
      v-model="community_id"
      is-link
      readonly
      required
      name="community_id"
      clearable
      label="社区"
      placeholder="社区"
      input-align="right"
      @click="showCommunityPicker = true"
      :rules="[{ required: true, message: '请选择社区!' }]"
    />
    <van-popup v-model:show="showCommunityPicker" position="bottom">
      <van-search v-model="search" placeholder="请输入搜索关键词" @update:model-value="onSearch" />
      <van-picker
        ref="picker"
        :columns="communityList"
        value-key="label"
        @confirm="onCommunityConfirm"
        @cancel="showCommunityPicker = false"
      />
    </van-popup>
    <van-field
      v-model="mch_id"
      is-link
      readonly
      required
      name="mch_id"
      label="小区"
      placeholder="小区"
      input-align="right"
      @click="handleSelectChild"
      :rules="[{ required: true, message: '请选择小区!' }]"
    />
    <van-popup v-model:show="showCommunityChildPicker" position="bottom">
      <van-search
        v-model="search1"
        placeholder="请输入搜索关键词"
        @update:model-value="onSearch1"
      />
      <van-picker
        ref="picker1"
        :columns="communityChildList"
        value-key="label"
        @confirm="onCommunityChildConfirm"
        @cancel="showCommunityChildPicker = false"
      />
    </van-popup>
    <!-- <van-field
      v-model="subcontractors_id"
      is-link
      readonly
      required
      name="subcontractors_id"
      clearable
      label="分包单位"
      placeholder="分包单位"
      input-align="right"
      @click="showSubcontractorPicker = true"
      :rules="[{ required: true, message: '请输入分包单位!' }]"
    /> -->
    <van-popup v-model:show="showSubcontractorPicker" position="bottom">
      <van-picker
        :columns="subcontractorList"
        value-key="name"
        @confirm="onSubcontractorConfirm"
        @cancel="showSubcontractorPicker = false"
      />
    </van-popup> -->
    <van-field
      v-model="name"
      type="text"
      required
      name="name"
      clearable
      label="姓名"
      placeholder="姓名"
      input-align="right"
      :rules="[{ required: true, message: '请输入姓名!' }]"
    />
    <van-field
      v-model="phone"
      type="tel"
      name="phone"
      clearable
      label="联系电话"
      placeholder="联系电话"
      input-align="right"
      required
      :rules="[{ validator: requiredPhoneValidator, message: '请输入格式正确的联系电话!' }]"
    />
    <van-field
      v-model="id_card"
      type="text"
      name="id_card"
      clearable
      label="身份证号"
      placeholder="身份证号"
      input-align="right"
      required
      :rules="[{ validator: idCardValidator, message: '请输入正确的身份证号码!' }]"
    />
    <!-- <van-field
      name="sex"
      label="性别"
      input-align="right"
      required
      :rules="[{ required: true, message: '请选择性别!' }]"
    >
      <template #input>
        <van-radio-group v-model="sex" direction="horizontal" disabled>
          <van-radio v-for="item in sexList" :key="item.id" :name="item.label">{{
            item.label
          }}</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <van-field
      v-model="age"
      type="text"
      name="age"
      clearable
      required
      placeholder="年龄"
      input-align="right"
      label="年龄"
      disabled
      :rules="[{ required: true, message: '请输入年龄!' }]"
    /> -->
    <van-field
      v-model="isolate_reason"
      is-link
      readonly
      required
      name="isolate_reason"
      clearable
      label="人员类型"
      placeholder="人员类型"
      input-align="right"
      @click="handleShowReasonPicker('main')"
      :rules="[{ required: true, message: '请输入人员类型!' }]"
    />
    <van-popup v-model:show="showReasonPicker" position="bottom">
      <van-picker
        :columns="reasonList"
        value-key="name"
        @confirm="onReasonConfirm"
        @cancel="showReasonPicker = false"
      />
    </van-popup>
    <van-field
      v-model="person_category"
      is-link
      readonly
      required
      name="person_category"
      clearable
      label="人员分类"
      placeholder="人员分类"
      input-align="right"
      @click="handleShowCategoryPicker('main')"
      :rules="[{ required: true, message: '请输入人员分类!' }]"
    />
    <van-popup v-model:show="showCategoryPicker" position="bottom">
      <van-search v-model="searchCategory" placeholder="请输入搜索关键词" @update:model-value="onSearchCategory" />
      <van-picker
        ref="pickerCategory"
        :columns="personCategoryList"
        value-key="name"
        @confirm="onCategoryConfirm"
        @cancel="showCategoryPicker = false"
      />
    </van-popup>

    <van-field
      v-model="address"
      type="text"
      required
      name="address"
      clearable
      label="现住址"
      placeholder="现住址"
      input-align="right"
      :rules="[{ required: true, message: '请输入现住址!' }]"
    />
    <van-field
      v-model="grid_name"
      type="text"
      required
      name="grid_name"
      clearable
      label="网格员姓名"
      placeholder="网格员姓名"
      input-align="right"
      :rules="[{ required: true, message: '请输入网格员姓名!' }]"
    />
    <van-field
      v-model="grid_phone"
      type="text"
      required
      name="grid_phone"
      clearable
      label="网格员电话"
      placeholder="网格员电话"
      input-align="right"
      :rules="[{ validator: requiredPhoneValidator, message: '请输入格式正确的网格员电话!' }]"
    />
    <van-field
      v-model="principal_name"
      type="text"
      required
      name="principal_name"
      clearable
      label="负责人姓名"
      placeholder="负责人姓名"
      input-align="right"
      :rules="[{ required: true, message: '请输入负责人姓名!' }]"
    />
    <van-field
      v-model="principal_phone"
      type="text"
      required
      name="principal_phone"
      clearable
      label="负责人电话"
      placeholder="负责人电话"
      input-align="right"
      :rules="[{ validator: requiredPhoneValidator, message: '请输入格式正确的负责人电话!' }]"
    />
    <van-field
      v-model="remark"
      required
      name="remark"
      type="textarea"
      rows="2"
      clearable
      label="隔离原因"
      placeholder="隔离原因"
      input-align="right"
      :rules="[{ required: true, message: '请输入隔离原因!' }]"
    />

    <van-field
      v-model="dateRange"
      is-link
      required
      readonly
      name="dataRange"
      clearable
      label="隔离时间"
      placeholder="隔离时间"
      input-align="right"
      @click="handleShowCalendar('main')"
      :rules="[{ required: true, message: '请输入隔离时间!' }]"
    />
    <van-calendar
      v-model:show="showCalendar"
      :min-date="minDate"
      color="#2e7cff"
      type="range"
      @confirm="onCalendarConfirm"
    />

    <tempate v-if="personData && personData.length > 0">
      <h1 class="px-4 py-2">其他家庭成员</h1>
      <div v-for="(item, i) in personData" :key="i" class="mb-2">
        <van-field
          v-model="item.name"
          type="text"
          required
          name="name1"
          clearable
          label="姓名"
          placeholder="姓名"
          input-align="right"
          :rules="[{ required: true, message: '请输入姓名!' }]"
        />
        <van-field
          v-model="item.id_card"
          type="text"
          name="id_card"
          clearable
          label="身份证号"
          placeholder="身份证号"
          input-align="right"
          required
          :rules="[{ validator: idCardValidator, message: '请输入正确的身份证号码!' }]"
        />
        <van-field
          v-model="item.phone"
          type="tel"
          name="phone"
          clearable
          label="联系电话"
          placeholder="联系电话"
          input-align="right"
          required
          :rules="[{ validator: requiredPhoneValidator, message: '请输入格式正确的联系电话!' }]"
        />
        <van-field
          v-model="item.isolate_reason"
          is-link
          readonly
          required
          name="isolate_reason"
          clearable
          label="人员类型"
          placeholder="人员类型"
          input-align="right"
          @click="handleShowReasonPicker('other', i)"
          :rules="[{ required: true, message: '请输入人员类型!' }]"
        />
        <van-field
          v-model="item.person_category"
          is-link
          readonly
          required
          name="item.person_category"
          clearable
          label="人员分类"
          placeholder="人员分类"
          input-align="right"
          @click="handleShowCategoryPicker('other', i)"
          :rules="[{ required: true, message: '请输入人员分类!' }]"
        />
        <van-field
          v-model="item.remark"
          required
          name="remark"
          type="textarea"
          rows="2"
          clearable
          label="隔离原因"
          placeholder="隔离原因"
          input-align="right"
          :rules="[{ required: true, message: '请输入隔离原因!' }]"
        />
        <!-- 分类 -->
        <van-field
          v-model="item.dateRange"
          is-link
          required
          readonly
          name="dataRange"
          clearable
          label="隔离时间"
          placeholder="隔离时间"
          input-align="right"
          @click="handleShowCalendar('other', i)"
          :rules="[{ required: true, message: '请输入隔离时间!' }]"
        />
        <div class="bg-[#fff] py-2 text-center">
          <a class="text-[red] text-base" @click="handleDeleteMembers(i)"><van-icon name="delete-o" /></a>
        </div>
      </div>
    </tempate>

    <a class="py-4 flex justify-center items-center text-base text-[#256de5]" @click="handleAddMembers"><van-icon name="add-o" />添加其他家庭成员</a>
    <div class="flex justify-center w-full mt-6 pb-5">
      <van-button round block type="primary" native-type="submit" :loading="loading">
        保存
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts">
  import { Toast } from 'vant'
  import { defineComponent, reactive, ref } from 'vue'
  import { useGlobalEffect } from '@/hooks/useGlobalEffect'
  import { useEntryEffect } from './hooks/useEntryEffect'

  export default defineComponent({
    name: 'Signup',
    setup() {
      const { getAllEnum, subcontractorList, reasonList, personCategoryList, requiredPhoneValidator, idCardValidator, } = useGlobalEffect()
      const {
        mch_id,
        community_id,
        subcontractors_id,
        name,
        sex,
        phone,
        grid_name,
        grid_phone,
        principal_name,
        principal_phone,
        age,
        id_card,
        isolate_reason,
        address,
        remark,
        dateRange,
        loading,
        communityList,
        showCommunityPicker,
        onCommunityConfirm,
        communityChildList,
        showCommunityChildPicker,
        onCommunityChildConfirm,
        showSubcontractorPicker,
        onSubcontractorConfirm,
        sexList,
        showReasonPicker,
        onReasonConfirm,
        showCalendar,
        onCalendarConfirm,
        handleSubmit,
        person_category,
        personData,
        showCategoryPicker,
        onCategoryConfirm,
        handleAddMembers,
        handleDeleteMembers,
        handleShowReasonPicker,
        handleShowCategoryPicker,
        handleShowCalendar,
      } = useEntryEffect()

      getAllEnum()

      const handleSelectChild = () => {
        if (communityChildList.value.length === 0) return Toast.fail('请先选择社区')
        showCommunityChildPicker.value = true
      }
      const picker = ref()
      const picker1 = ref()
      const search = ref('')
      const search1 = ref('')
      const onSearch = (value: any) => {
        // 过滤结果
        let filter = communityList.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker.value.setColumnValues(0, filter)
      }

      const onSearch1 = (value: any) => {
        let filter = communityChildList.value.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker1.value.setColumnValues(0, filter)
      }

      const pickerCategory = ref()
      const searchCategory = ref('')
      const onSearchCategory = (value: any) => {
        let filter = personCategoryList.value.filter((item) => {
          return item.name.indexOf(value) >= 0
        })
        pickerCategory.value.setColumnValues(0, filter)
      }

      return {
        picker,
        picker1,
        search,
        onSearch,
        search1,
        onSearch1,
        mch_id,
        community_id,
        subcontractors_id,
        name,
        sex,
        phone,
        grid_name,
        grid_phone,
        principal_name,
        principal_phone,
        age,
        id_card,
        isolate_reason,
        address,
        dateRange,
        remark,
        loading,
        communityList,
        showCommunityPicker,
        onCommunityConfirm,
        handleSelectChild,
        communityChildList,
        showCommunityChildPicker,
        onCommunityChildConfirm,
        subcontractorList,
        showSubcontractorPicker,
        onSubcontractorConfirm,
        sexList,
        reasonList,
        personCategoryList,
        showReasonPicker,
        onReasonConfirm,
        showCalendar,
        minDate: new Date(2022,1,1),
        onCalendarConfirm,
        handleSubmit,
        requiredPhoneValidator,
        idCardValidator,
        person_category,
        personData,
        showCategoryPicker,
        onCategoryConfirm,
        handleAddMembers,
        handleDeleteMembers,
        handleShowReasonPicker,
        handleShowCategoryPicker,
        handleShowCalendar,
        pickerCategory,
        searchCategory,
        onSearchCategory
      }
    }
  })
</script>
